<template>
  <div class="container">
    <el-drawer
      title="提问栏"
      :visible.sync="drawerVisible.drawer2"
      direction="rtl"
      size="350px"
      :modal="false"
      :show-close="false"
      custom-class="req-comments"
      @close="closeDrawer('drawer2')"
    >
      <div class="req-title">
        <span>问题标题</span>
        <div class="title-input">
          <textarea
            maxlength="50"
            placeholder="请输入标题..."
            class="title-input-area"
            v-model="title"
          />
          <!-- <span>1/200</span> -->
        </div>
      </div>
      <div class="req-body">
        <span>问题描述</span>
        <div class="body-input">
          <textarea
            maxlength="50"
            placeholder="请描述问题..."
            class="req-body-area"
            v-model="message"
          />
          <!-- <span>1/200</span> -->
        </div>
      </div>
      <div
        class="pub-btn"
        @click="addReq()"
      >
        <button class="req-pub-btn">发布
        </button>
      </div>

    </el-drawer>
    <div class="header">
      <div class="hot-title"><svg
          class="icon hot-icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-zuire"></use>
        </svg>
        <span>最热回答</span>
      </div>
      <div class="input-container">
        <input
          type="text"
          name="text"
          class="input"
          v-model="text"
          placeholder="search..."
        >
        <span
          class="icon input-icon"
          @click="searchReq"
        >
          <svg
            width="19px"
            height="19px"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <g
              id="SVGRepo_bgCarrier"
              stroke-width="0"
            ></g>
            <g
              id="SVGRepo_tracerCarrier"
              stroke-linecap="round"
              stroke-linejoin="round"
            ></g>
            <g id="SVGRepo_iconCarrier">
              <path
                opacity="1"
                d="M14 5H20"
                stroke="#000"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                opacity="1"
                d="M14 8H17"
                stroke="#000"
                stroke-width="1.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M21 11.5C21 16.75 16.75 21 11.5 21C6.25 21 2 16.75 2 11.5C2 6.25 6.25 2 11.5 2"
                stroke="#000"
                stroke-width="2.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                opacity="1"
                d="M22 22L20 20"
                stroke="#000"
                stroke-width="3.5"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
            </g>
          </svg>
        </span>
      </div>

      <div class="recentTime">
        <svg
          class="icon time-icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-zuijinliulan"></use>
        </svg>
        <span>最新提问</span>
      </div>
    </div>
    <div class="reqContainer">
      <ReqCard
        v-for="(reqCard,index) in reqCards"
        :key="index"
        :reqCard="reqCard"
      > </ReqCard>

    </div>
    <div class="orderCheck">
      <div class="recentReq">
        <RecentCard
          v-for="(recentCard,index) in recentCards"
          :key="index"
          :recentCard='recentCard'
          v-on:getReqCard='getReqCardAgain'
        ></RecentCard>

      </div>
      <div class="reqBtn">
        <button
          class="Btn"
          @click="openDrawer('drawer2')"
        >去提问
          <svg
            class="icon req-icon"
            aria-hidden="true"
          >
            <use xlink:href="#icon-doubt-01"></use>
          </svg>
        </button>
      </div>

    </div>
  </div>
</template>

<script>
import Edit from "../../../components/Edit";
import ReqCard from "./reqCard";
import RecentCard from "./recentReqCard";
import { mapState } from "vuex";
import { addReqAPI, updateReqViewAPI } from "@/api";

export default {
  data() {
    return {
      title: "",
      message: "",
      text: "",
      drawerVisible: {
        drawer1: false,
        drawer2: false,
        drawer3: false,
      },
    };
  },
  methods: {
    openDrawer(drawerName) {
      console.log(drawerName);
      if (drawerName == "drawer1") {
        this.drawerVisible.drawer1 = true;
      } else if (drawerName == "drawer2") {
        this.drawerVisible.drawer2 = true;
      } else {
        this.drawerVisible.drawer3 = true;
      }
    },
    closeDrawer(drawername) {
      if (drawername == "drawer1") {
        this.drawerVisible.drawer1 = false;
      } else if (drawername == "drawer2") {
        this.drawerVisible.drawer2 = false;
      } else {
        this.drawerVisible.drawer3 = false;
      }
    },
    searchReq() {
      if (this.text == "") {
        this.$store.dispatch("getReqCards", { way: 0, text: "" });
      } else {
        this.$store.dispatch("getReqCards", { way: 1, text: this.text });
        this.text = "";
      }
    },
    // 再次获取req卡片
    getReqCardAgain() {
      console.log("触发了啊事件");
      this.$store.dispatch("getReqCards", { way: 0, text: "" });
    },
    async addReq() {
      if (this.title != "") {
        const res = await addReqAPI({
          title: this.title,
          message: this.message,
        });
        console.log("fewaeawew", res);
        this.$store.dispatch("getReqCards", { way: 0, text: "" });
        this.$store.dispatch("getRecentCard", { way: 2, text: "" });
        this.title = "";
        this.message = "";
        setTimeout(() => {
          this.closeDrawer("drawer2");
        }, 800);
      } else {
        this.$message("请完善信息！");
      }
    },

    // 用户点赞更新req 浏览量
    async updateReqView(request_id) {
      const res = await updateReqViewAPI(request_id);
      // 成功 TODO: 再次获取卡片
      this.$store.dispatch("getReqCards", { way: 0, text: "" });
      this.$store.dispatch("getRecentCard", { way: 2, text: "" });
    },
  },
  components: {
    Edit,
    ReqCard,
    RecentCard,
  },
  computed: {
    reqCards() {
      return this.$store.state.request.reqCards;
    },
    recentCards() {
      return this.$store.state.request.recentCards;
    },
  },
  mounted() {
    this.$store.dispatch("getReqCards", { way: 0, text: "" });
    this.$store.dispatch("getRecentCard", { way: 2, text: "" });
  },
};
</script>
<style scoped lang='less'>
// 提问栏按钮
.pub-btn {
  width: 100%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-right: 20px;
}
.req-pub-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
  text-align: center;
  box-sizing: border-box;
}
.req-pub-btn:active {
  transform: scale(1.1);
  transition-duration: 0.3s;
  box-sizing: border-box;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
// 富文本框
::v-deep .el-drawer.btt.edit-comments {
  height: 74% !important;
}
::v-deep .el-drawer__body {
  justify-content: flex-start !important;
}
.com-btn {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding: 25px;
  align-items: center;
  text-align: center;
}
.com-pub-btn {
  text-align: center;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
}
.com-pub-btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: 0.3s;
}

.com-pub-btn:active {
  transform: translate(4px, 4px);
  transition-duration: 0.3s;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
// 发布问题
.req-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}
.title-input {
  display: flex;
  width: 100%;
  justify-content: center;

  align-items: flex-end;
  margin-top: 10px;
}
.body-input {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: flex-end;
}
.req-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 50%;
  margin-top: 20px;
}
.title-input-area {
  background: #a0bbe1;
  height: 30px;
  border: 1px solid #a9c9ff;
  margin-top: 3px;
  color: #4b5563;
  width: 75%;
  resize: none;
  outline: none;
  border-radius: 5px;
  padding: 10px;
  transition: border-color 0.3s;
}
.req-body-area {
  background: #a0bbe1;
  height: 80%;
  border: 1px solid #a9c9ff;
  margin-top: 3px;
  color: #4b5563;
  width: 75%;
  resize: none;
  outline: none;
  border-radius: 5px;
  padding: 10px;
  transition: border-color 0.3s;
}
// 抽屉问题
/* 抽屉评论 */
::v-deep .el-drawer__body {
  width: 95%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
::v-deep .el-drawer.rtl.req-comments {
  height: 90%;
  background-color: #b6dbfe;
  border-radius: 10px;
  width: 40% !important;
  right: 2%;
  top: 8%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .el-drawer__container {
  position: relative;

  display: flex;

  left: 0;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  bottom: 0;
  height: 90%;
  width: 100%;
}

::v-deep .el-drawer__wrap.draw-comments {
  background-color: #98c5e5;
}

// 发问题

// 写问题
.Btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 40px;
  border: none;
  padding: 0px 20px;
  background-color: #52c1f4;
  color: white;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 5px 5px 0px #64ccc5;
  transition-duration: 0.3s;
  margin-bottom: -20px;
}

.svg {
  width: 13px;
  position: absolute;
  right: 0;
  margin-right: 20px;
  fill: white;
  transition-duration: 0.3s;
}

.Btn:hover svg {
  right: 43%;
  margin: 0;
  padding: 0;
  border: none;
  transition-duration: 0.3s;
}

.Btn:active {
  transform: translate(4px, 4px);
  transition-duration: 0.3s;
  box-shadow: 2px 2px 0px rgb(140, 32, 212);
}
.reqBtn {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  padding-right: 50px;
}
// 抽屉回答
::v-deep .el-drawer__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 20px;
  margin-bottom: 16px;
}
::v-deep .el-drawer__body {
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
::v-deep .el-drawer.btt {
  height: 100%;
  width: 70%;
  background-color: #b6dbfe;
  border-radius: 10px;
  left: 15%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
::v-deep .el-drawer.btt.draw-comments {
  height: 99% !important;
}
::v-deep .el-drawer__container {
  position: relative;

  display: flex;

  height: 100%;
  width: 100%;
}

::v-deep .el-drawer__wrap.draw-comments {
  background-color: #98c5e5;
}

// 抽屉问题主要信息

.reqInfo-card {
  display: flex;
  width: 100%;
  width: 100%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: flex-start;
  position: relative;
  border-radius: 1.5em;
  padding: 2em;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
}
// 抽屉回答问题
.comReq-input {
  display: flex;
  width: 100%;
  margin-bottom: 30px;
  justify-content: flex-end;
  align-items: center;
}

.spacer {
  display: flex;
  width: 10%;
  align-items: center;
  justify-content: space-around;
}
.secondary-button {
  stroke: #d1d5db;
  background: #b7b6ff;
  border: 1px solid #b7b6ff;
  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
  border-radius: 5px;
  padding: 10px;
  transition: all 0.3s;
  cursor: pointer;
}
.secondary-button:hover {
  transform: scale(1.1);
}

// 周抽屉回答--header图标--评论
.comHeader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid #a8a7fc;
}

.comHeader-icon {
  width: 30px;
  height: 30px;
}
.reqComments {
  flex-direction: column;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  height: 80%;
  width: 100%;
  overflow: auto;
}

.order-span {
  display: flex;
  width: 10%;
  justify-content: space-around;
  align-items: center;
}
.order-span > span {
  cursor: pointer;
  text-align: center;
  width: 40px;
  border-radius: 20px;
  transition: 0.5s;
}
.order-span > span:hover {
  background-color: #b7b6ff;
}

// 用户回答
.com-card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 1px;
  position: relative;
  padding: 0.4em;
  transition: transform 0.4s ease;
  margin-top: 20px;
  min-height: 100px;
}
.com-card-detial {
  font-size: 15px;
  line-height: 1.5;
  margin-top: 10px;
  margin-bottom: 20px;
}
// 用户回答点赞小图标
.com-card-like-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
// 用户回答主要区域
.com-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 90%;
  overflow: auto;
}

/*定义滚动条宽度和颜色*/
.com-main::-webkit-scrollbar {
  width: 4px;
}

.com-main::-webkit-scrollbar-track {
  background: #d2f3ef;
}

.com-main::-webkit-scrollbar-thumb {
  background: #94f0f0;
}

/* 悬停效果 */
.com-main::-webkit-scrollbar-thumb:hover {
  background: #5cd0f4;
}
// card底部小图标
.footer-icon {
  width: 20px;
  height: 20px;
}

.info {
  font-size: 13px;
  justify-content: center;
  align-items: center;
}
.info > div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
  opacity: 0.8;
}
.info > div > span {
  padding-left: 5px;
  // opacity: 0.7;
}
// 最新提问
.recentReq {
  display: flex;
  width: 100%;
  height: 290px;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
// 滚动条样式调
.recentReq::-webkit-scrollbar {
  display: none;
}
.hot-title > span {
  font-weight: bold;
}

// 最新提问
.recentTime {
  display: flex;
  width: 30%;
  align-items: center;
  justify-content: center;
}
.recentTime > span {
  font-weight: bold;
}

.recent-card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  border-radius: 1em;
  padding: 0.5rem;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.recent-card:hover {
  cursor: pointer;
  transform: scale(0.98);
}

.recent-card:active {
  transform: scale(0.9);
}
.card-content {
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
  padding-bottom: 4px;
}
.detial {
  display: flex;
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.detial > span {
  width: 100%;
  word-wrap: break-word; /* 兼容旧版本浏览器 */
  overflow-wrap: break-word; /* 较新版本浏览器支持 */
}
.recentReq-title {
  display: flex;
  font-size: 16px;
  font-weight: 500;
  padding: 3px;
  padding-bottom: 10px;
  line-height: 23px;
}
// 热点筛选
.input-container {
  width: 18%;
  position: relative;
}

.input-icon {
  position: absolute;
  right: 10px;
  top: calc(50% + 5px);
  cursor: pointer;
  transform: translateY(calc(-50% - 5px));
}

.input {
  width: 100%;
  height: 30px;

  transition: 0.2s linear;
  border: 2.5px solid black;
  font-size: 14px;
  // text-transform: uppercase;
  letter-spacing: 2px;
}

.input:focus {
  outline: none;
  border: 0.5px solid black;
  box-shadow: -5px -5px 0px black;
}

.input-container:hover > .icon {
  animation: anim 1s linear infinite;
}

@keyframes anim {
  0%,
  100% {
    transform: translateY(calc(-50% - 5px)) scale(1);
  }

  50% {
    transform: translateY(calc(-50% - 5px)) scale(1.1);
  }
}
// 结束

// 卡片底部四个span图标
.info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap; /* 当超出容器宽度时自动换行 */
  gap: 20px; /* 设置子元素之间的间距 */
  justify-content: space-around;
  align-items: flex-start;
  align-content: flex-start;
  overflow: none;
}
.reqContainer {
  // background-color: rgb(227, 255, 255);
  padding: 10px;
  border-radius: 10px;
  width: 60%;
  flex-direction: column;
  height: 95%;
  overflow-y: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: -20px;
}
// 最热
.hot-icon {
  width: 40px;
  height: 40px;
}
// 最新图标
.time-icon {
  width: 35px;
  height: 35px;
}
.req-icon {
  width: 20px;
  height: 20px;
}
.header {
  display: flex;
  width: 95%;
  margin-top: 10px;
  align-items: center;
  justify-content: flex-start;
}
.hot-title {
  display: flex;
  width: 38%;
  align-items: center;
  justify-content: flex-start;
}
.orderCheck {
  width: 35%;
  height: 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: -10px;
}
.reqContainer::-webkit-scrollbar {
  display: none;
}
.card {
  width: 90%;
  background: #dcf5d4;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: center;

  align-items: flex-start;
  position: relative;
  border-radius: 1.5em;
  padding: 2em;
  transition: transform 0.4s ease;
  margin-bottom: 20px;
}
.title {
  font-size: 20px;
  line-height: 24px;
}
.detial {
  font-size: 14px;
  line-height: 1.5;
  margin-top: 15px;
}
.card:hover {
  cursor: pointer;

  transform: scale(0.99);
}

.card:active {
  transform: scale(0.96);
}
</style>